﻿// LiftEffect({
// 	control1: ".lift-nav",//侧栏电梯的容器
// 	control2: ".lift",//需要遍历的电梯的父元素
//  stageId:1,// 阶段id
// 	target: [".t1", ".t2", ".t3", ".t4", ".t5", ".t6"],//监听的内容，注意一定要从小到大输入
// 	current: "current"//选中项 类名
// });
let flag = true;
let $doc = $(document)
let $liftContainer
let $lift
let $stageH3List

function LiftEffect(config) {
	// 点击li时不需要切换背景色
	$liftContainer = $(config.control1)
	$lift = $(config.control2)

	// 1.获取所有 天标题
	$stageH3List = $('h3.dayTitle', `.layui-tab-item.stage[stageid=${config.stageId}]`)
	if ($stageH3List.length === 0) return

	// 2. 第一个 天标题 的 top 位置
	const firstFloorTop = $stageH3List.first().offset().top;
	// console.log(firstFloorTop)

	// 切换侧边导航的状态
	if ($doc.scrollTop() > firstFloorTop) {
		$liftContainer.fadeIn();
	}

	// 2. 点击li页面跳转到对应的区域
	$lift.children().on("click", function () {
		// 点击li时 不需要进行类的切换 关闭节流阀
		flag = false;
		// 获取当前被点击的li的索引号
		var index = $(this).index();
		console.log(index)
		var currentLocation = $stageH3List.eq(index).offset().top;
		// 页面跳转的比较生硬，可以采取动画来做跳转
		// $("html,body").scrollTop(currentLocation);
		// (1)要记住：只有元素才有动画 
		$("html,body").stop().animate({
			scrollTop: currentLocation
		}, function () {
			flag = true; // 当页面动画效果完成后打开节流阀
		})
		// (2)同时选中的选项添加类
		$(this).addClass("current").siblings().removeClass("current");
	})
}

// 页面滚动事件 $(window).scroll()
$(window).on('scroll', scrollWin);

function scrollWin() {
	// 指定位置显示导航
	// 3. 页面滑到相对应的内容区域 导航栏选项li添加或删除类
	// 通过内容区域索引号 找到导航栏选项的索引
	// 遍历对象 通过内容区域找到对应的导航选项 
	if (flag) {
		console.log('----------------begin----------------')
		let docTop = parseInt($doc.scrollTop())
		for (let i = $stageH3List.length - 1; i >= 0; i--) {
			// for (let i = 0; i < $stageH3List.length; i++) {
			let ele = $stageH3List[i]
			let h3Top = parseInt($(ele).offset().top)
			console.log('h3-doc:', h3Top, docTop)

			if (docTop >= h3Top) {
				// 当前内容区域对应的导航选项li 添加类 其余的兄弟移除类
				$lift.children().eq(i).addClass("current").siblings().removeClass("current"); // 链式编程
				break;
			}
		}
		console.log('----------------end ----------------')

		// $stageH3List.each(function (i, ele) {
		// 	// console.log(ele)
		// 	// console.log($(ele).offset().top, $doc.scrollTop(), i)
		// 	// 页面卷去的头部 >= 当前内容区域的top值

		// })
	}
}